/*
 * @Description: 选择可预约时间
 * @Author: shuaishuai.wang
 * @Date: 2019-10-11 16:53:04
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-10-12 14:31:36
 */
<template>
  <div
    class="mask"
    v-show="handlerState"
  >
    <div class="choose_area">
      <div class="calendar">
        <div class="month flex-h flex-hsb">
          <i
            class="iconfont icon-leftangel fontsize28"
            :class="canGoLastMonth() ? 'change_month' : ''"
            @click="changeMonth(-1)"
          ></i>
          <p class="fontsize32">{{this.chooseMonth.year}}年{{this.chooseMonth.month.toString().padStart(2, '0')}}月</p>
          <i
            class="iconfont icon-rightangel fontsize28"
            :class="handler.CAN_NEXT_MONTH && handler.CAN_NEXT_MONTH > 0 ? 'change_month' : ''"
            @click="changeMonth(1)"
          ></i>
        </div>
        <div class="day flex-h flex-hw fontsize32">
          <div class="week fontsize24">一</div>
          <div class="week fontsize24">二</div>
          <div class="week fontsize24">三</div>
          <div class="week fontsize24">四</div>
          <div class="week fontsize24">五</div>
          <div class="week fontsize24">六</div>
          <div class="week fontsize24">日</div>
          <div
            v-for="(day, emptyIndex) in emptyDay"
            :key="emptyIndex"
            class="one_day"
          ></div>
          <div
            v-for="(day, dayIndex) in handler.RESERVATION_DATE_RESP_LIST"
            :key="dayIndex + 'days'"
            class="one_day"
            :class="{'may_day' : day.STATUS === 1 , 'choose_day' : dayIndex === chooseDay, 'fontsize28' : chooseMonth.year == today.year && chooseMonth.month == today.month && dayIndex === today.day - 1}"
            @click="chooseThisDay(dayIndex)"
          >{{getToDay(day.RESERVATION_DATE, dayIndex)}}</div>
        </div>
      </div>
      <div class="duration">
        <div class="title">选择时间段</div>
        <div
          class="duration_area flex-h flex-hsb"
          v-show="handler.RESERVATION_DATE_RESP_LIST && handler.RESERVATION_DATE_RESP_LIST[chooseDay].STATUS == 1"
        >
          <div class="info_area">
            <div
              class="one_duration flex-h flex-hsb"
              v-for="(dur, index) in duration.left"
              :key="index + 'left'"
              @click="chooseThisDuration(dur)"
            >
              <i
                class="iconfont"
                :class="[chooseDuration == dur.RESERVABLE_TIME_PERIOD ? 'icon-circle-o' : 'icon-circle', dur.RESERVABLE_QUOTA < 1 ? 'cannot_choose' : '']"
              ></i>
              <p class="dur fontsize28">{{dur.RESERVABLE_TIME_PERIOD}}</p>
              <p class="state fontsize20">{{dur.RESERVABLE_QUOTA | getResidueNum}}</p>
            </div>
          </div>
          <div class="separate"></div>
          <div class="info_area">
            <div
              class="one_duration flex-h flex-hsb"
              v-for="(dur, index) in duration.right"
              :key="index + 'right'"
              @click="chooseThisDuration(dur)"
            >
              <i
                class="iconfont"
                :class="[chooseDuration == dur.RESERVABLE_TIME_PERIOD ? 'icon-circle-o' : 'icon-circle', dur.RESERVABLE_QUOTA < 1 ? 'cannot_choose' : '']"
              ></i>
              <p class="dur fontsize28">{{dur.RESERVABLE_TIME_PERIOD}}</p>
              <p class="state fontsize20">{{dur.RESERVABLE_QUOTA | getResidueNum}}</p>
            </div>
          </div>
        </div>
        <p
          v-show="handler.RESERVATION_DATE_RESP_LIST && handler.RESERVATION_DATE_RESP_LIST[chooseDay].STATUS == 1 && handler.RESERVATION_DATE_RESP_LIST && handler.RESERVATION_DATE_RESP_LIST[chooseDay].IS_FULL &&handler.RESERVATION_DATE_RESP_LIST[chooseDay].IS_FULL > 0"
          class="full_msg"
        >预约已满，可拨打<a href="tel:021-39979898">021-39979898</a>咨询</p>
        <p
          class="can_not_appointment fontsize32"
          v-show="handler.RESERVATION_DATE_RESP_LIST && handler.RESERVATION_DATE_RESP_LIST[chooseDay].STATUS != 1"
        >
          未开放预约！
        </p>
        <!--<p
          class="can_not_appointment fontsize32"
          v-show="handler.RESERVATION_DATE_RESP_LIST && handler.RESERVATION_DATE_RESP_LIST[chooseDay].STATUS == 2"
        >
          已过可预约时间！
        </p>-->
        <div class="btn_area flex-h flex-hsb">
          <button
            @click="closeHandler"
            class="fontsize32"
          >取消</button>
          <button
            class="confirm_duration_btn fontsize32"
            @click="chooseHandler"
          >确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AjaxForBusOpen from '@/utils/AjaxForBusOpen'
// import testLogin from '../../utils/LoginUtil'

export default {
  name: 'choose-handler',
  props: {
    handlerState: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      handler: {},
      duration: { // 时间段数组，分为左侧和右侧
        left: [],
        right: []
      },
      Toast: '', // 原生弹窗组件
      today: {}, // 今天
      emptyDay: [], // 用于日历占位
      days: [],
      chooseDay: 0, // 当前选中日期
      chooseMonth: {
        year: '',
        month: ''
      }, // 当前显示数据所属月份
      chooseDuration: '' // 当前选中时间段
    }
  },
  filters: {
    getResidueNum(num) {
      if (num < 1) {
        return '已约满'
      } else {
        return '剩余' + num
      }
    }
  },
  mounted() {
    // testLogin()
    let time = new Date()
    this.today.year = time.getFullYear()
    this.today.month = time.getMonth() + 1
    this.today.day = time.getDate()
    let index = 0
    AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/earliestReservationDate', {}).then(data => {
      if (data.RESERVATION_DATE && data.RESERVATION_DATE.length > 0) {
        let dateArr = data.RESERVATION_DATE.split('-')
        this.chooseMonth.year = parseInt(dateArr[0])
        this.chooseMonth.month = parseInt(dateArr[1])
        index = parseInt(dateArr[2]) - 1
      } else {
        this.chooseMonth.year = this.today.year
        this.chooseMonth.month = this.today.month
        index = this.today.day - 1
      }
      this.getHandler({
        CURRENT_YEAR_MONTH: this.chooseMonth.year + '-' + this.chooseMonth.month.toString().padStart(2, '0')
      }, index)
      console.log(data.RESERVATION_DATE)
    }).catch(() => {
      this.chooseMonth.year = this.today.year
      this.chooseMonth.month = this.today.month
      index = this.today.day - 1
      this.getHandler({
        CURRENT_YEAR_MONTH: this.chooseMonth.year + '-' + this.chooseMonth.month.toString().padStart(2, '0')
      }, index)
    })
    // this.changeMonth(1)
    /* this.chooseDay = this.today.day - 1 */
    this.$Toast.then(Toast => {
      this.Toast = Toast
    })
  },
  methods: {
    getHandler(params, index) {
      let emptyDay = new Date(params.CURRENT_YEAR_MONTH + '-01').getDay()
      this.emptyDay = []
      this.days = []
      for (let i = 0; i < emptyDay - 1; i++) {
        this.emptyDay.push('')
      }
      params = params || {}
      AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/dateList', params).then(data => {
        this.handler = data
        console.log(data)
        this.chooseThisDay(index)
      })
    },
    chooseHandler() { // 点击确定按钮时验证数据是否为空，不空向父组件传递数据
      if (this.chooseDuration.length > 0) {
        this.$emit('chooseHandler', {
          time: this.chooseMonth.year + '-' + this.chooseMonth.month + '-' + (this.chooseDay + 1),
          duration: this.chooseDuration
        })
      } else {
        this.Toast.showShortBottom('请选择预约时段')
      }
    },
    chooseThisDay(index) { // 选中日期更新下方时间段数据
      if ((this.chooseMonth.year === this.today.year && this.chooseMonth.month === this.today.month && index < this.today.day - 1)) { // || this.handler.RESERVATION_DATE_RESP_LIST[index].STATUS > 1
        console.log('false')
      } else {
        if (/* this.handler.RESERVATION_DATE_RESP_LIST[index].STATUS < 2 && */(this.chooseMonth.year !== this.today.year || this.chooseMonth.month !== this.today.month) || this.chooseDay !== index) {
          this.chooseDay = index // 选中当前日期
          this.chooseDuration = '' // 清除当前选中时间段
          let timeQuota = this.handler.RESERVATION_DATE_RESP_LIST[index].RESERVABLE_TIME_QUOTA // 获取当前日期可预约时间段
          this.duration = { // 重置时间段存储
            left: [],
            right: []
          }
          for (let i = 0; i < timeQuota.length; i++) { // 遍历所有时间段将数据分开存储在left与right中
            if (i >= timeQuota.length / 2) { // 将数组等分为两段，按顺序依次存入left与right中，数组长度为奇数，多出的一个存储在left上
              this.duration.right.push(timeQuota[i])
            } else {
              this.duration.left.push(timeQuota[i])
            }
          }
        }
      }
    },
    chooseThisDuration(dur) { // 选择当前时间段
      if (dur.RESERVABLE_QUOTA > 0) { // 判断当前有可预约的位置
        this.chooseDuration = dur.RESERVABLE_TIME_PERIOD
      }
    },
    canGoLastMonth() { // 能否选择上一月
      if (this.chooseMonth.year > this.today.year) {
        return true
      } else if (this.chooseMonth.year === this.today.year && this.chooseMonth.month > this.today.month) {
        return true
      }
      return false
    },
    changeMonth(state) { // 改变月份
      if (state < 0) { // 选择上一月
        if (!this.canGoLastMonth()) { // 不可选择上一月
          return
        }
      } else { // 选择下一月
        if (this.handler.CAN_NEXT_MONTH < 1) { // 不可选择下一月
          return
        }
      }
      this.chooseMonth.month += state
      if (this.chooseMonth.month < 1) {
        this.chooseMonth.month = 12
        this.chooseMonth.year += -1
      } else if (this.chooseMonth.month > 12) {
        this.chooseMonth.month = 1
        this.chooseMonth.year += 1
      }
      let index = this.today.day - 1
      if (this.chooseMonth.year !== this.today.year || this.chooseMonth.month !== this.today.month) {
        index = 0
      }
      this.getHandler({
        CURRENT_YEAR_MONTH: this.chooseMonth.year + '-' + this.chooseMonth.month.toString().padStart(2, '0')
      }, index)

      // this.chooseThisDay(index) // 切换月份默认选中当月最后一天
    },
    closeHandler() {
      this.$emit('closeHandler')
    },
    getToDay(time, dayIndex) { // 时间转换，将后台返回的yyyy-MM-dd类型的时间格式截取仅剩天的数据
      if (this.chooseMonth.year === this.today.year && this.chooseMonth.month === this.today.month && dayIndex === this.today.day - 1) {
        return '今天'
      }
      return parseInt(time.substring(8, 10))
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../common.scss';
.mask {
  .choose_area {
    width: 622px;
    height: fit-content;
    position: absolute;
    padding: 32px;
    background-color: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 8px; /*no*/
    .calendar {
      .month {
        height: 60px;
        border-bottom: 1px solid #eeeeee;
        i {
          display: inline-block;
          height: 40px;
          line-height: 40px;
          font-weight: 800;
        }
        p {
          height: 40px;
          color: #027aff;
        }
        .change_month {
          color: #027aff;
        }
      }
      .day {
        .week {
          padding: 32px 0 16px 0;
          width: 60px;
          text-align: center;
          color: #333;
          margin: 0 14.4px;
        }
        .one_day {
          width: 60px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          color: #999;
          margin: 12px 14.4px;
          border-radius: 50%;
        }
        .may_day {
          background-color: #f0f4fd;
          color: #333;
        }
        .choose_day {
          background-color: #027aff;
          color: #fff;
        }
      }
    }
    .duration {
      .title {
        height: 50px;
        line-height: 50px;
        border-left: 8px solid #027aff;
        padding-left: 20px;
      }
      .duration_area {
        padding: 16px 0;
        .info_area {
          width: 100%;
          .one_duration {
            height: 40px;
            margin: 16px 0;
            align-items: center;
            i {
              color: #027aff;
            }
            .cannot_choose {
              color: #999;
            }
            .state {
              padding: 4px 8px;
              border-radius: 4px; /*no*/
              color: #666;
              background-color: #f0f4fd;
            }
          }
        }
        .separate {
          width: 42px;
          height: 40px;
        }
      }
      .full_msg {
        top: -32px;
        position: relative;
        color: #ccc;
        a {
          color: $themeColors;
        }
      }
      .can_not_appointment {
        height: 178px;
        line-height: 178px;
        text-align: center;
        color: #ccc;
      }
      .btn_area {
        button {
          width: 280px;
          height: 72px;
          line-height: 72px;
          border-radius: 25px; /*no*/
          border: 1px solid $themeColors; /*no*/
          color: $themeColors;
          background-color: $bgColorDiv;
        }
        .confirm_duration_btn {
          background-color: $themeColors;
          color: #fff;
          box-shadow: 0px 6px 14px 0px rgba(159, 204, 254, 1); /*no*/
        }
      }
    }
  }
}
</style>
